<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>音乐播放</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <link href="../static/css/pinglun.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/pinglun.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="/js/vue.js"></script><!-- 导包 -->
    <script src="../static/js/vue.js"></script><!-- 导包 -->
    <style>
        *{
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
            font-size: 14px;
        }
        body {
            background: url(/img/bg1.jpeg) repeat fixed;
            background-size: cover;
            background-position: center center;
        }
        .box{
            width: 550px;
            height: 550px;
            position: relative;
            top: 30px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: 0 auto;
            border-radius: 10px;
            /*opacity: 0.6;*/
        }
        .play{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            top: 75px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: 0 auto;
            box-shadow: 0 0 5px 2px #000;
        }
        #xuanzhuan{
            -webkit-animation: play 10s linear infinite;
            -moz-animation: play 10s linear infinite;
            animation: play 10s linear infinite;
        }
        @-webkit-keyframes play{
            0%{-webkit-transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        @-moz-keyframes play {
            0%{-moz-transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        @keyframes play{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        .big{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            top: 44%;
            left: 0px;
            right: 0px;
            margin: auto;
            background-color: black;
            z-index: 2;
        }
        .middle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            top: 45%;
            left: 0px;
            right: 0px;
            margin: auto;
            background-color: white;
            z-index: 3;
        }
        .small{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            top: 253px;
            left: 0px;
            right: 0px;
            margin: auto;
            background-color: black;
            z-index: 4;
            overflow: hidden;
            box-shadow: 0 0 3px 3px #000000;
        }
        .title{
            width: 60%;
            height: 5%;
            position: absolute;
            /*border: 1px solid red;*/
            top: 3%;
            left: 0px;
            right: 0px;
            margin: auto;
            text-align: center;
            line-height: 30px;
            overflow: hidden;
        }
        .title p{
            position: relative;
            top: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            text-align: center;
            -webkit-animation: anim2 8s linear infinite;
        }
        @-webkit-keyframes anim2 {
            0% { left: 200px; opacity: 0.2}
            25% { left: 100px; opacity: 0.6}
            50% { left: 0px; opacity: 1}
            75% { left: -100px; opacity: 0.6}
            100% { left: -200px; opacity: 0.2}
        }
        .content p{
            position: relative;
            top: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            text-align: center;
            -webkit-animation: anim1 200s linear infinite;
        }
        @-webkit-keyframes anim1{
            0% {top: 200px;opacity: 0.4}
            5% {top: 0px;opacity: 1}
            15% {top: -200px;opacity: 1}
            20% {top: -400px;opacity: 1}
            25% {top: -600px;opacity: 1}
            30% {top: -800px;opacity: 1}
            35% {top: -1000px;opacity: 1}
            40% {top: -1200px;opacity: 1}
            45% {top: -1400px;opacity: 1}
            50% {top: -1600px;opacity: 1}
            55% {top: -1800px;opacity: 1}
            60% {top: -2000px;opacity: 1}
            65% {top: -2200px;opacity: 1}
            70% {top: -2400px;opacity: 1}
            75% {top: -2600px;opacity: 1}
            80% {top: -2800px;opacity: 1}
            85% {top: -3000px;opacity: 1}
            90% {top: -3200px;opacity: 1}
            95% {top: -3400px;opacity: 0.8}
            100%{top: -3600px;opacity: 0.4}
        }
        #pic1{
            display: block;
        }
        #icon1{
            position: absolute;
            top: -38px;
            left: -2px;
            width: 300px;
            z-index: 5;
            cursor: pointer;
        }
        #pic2{
            display: none;
        }
        #icon2{
            position: absolute;
            top: -57px;
            left: -222px;
            width: 400px;
            z-index: 5;
            cursor: pointer;
        }
        .musicInfo{
            font-family: 微软雅黑;
            /*margin-left: 38%;*/
            text-align: center;
        }
        .comment{
            font-family:"微软雅黑";
            font-size: 20px;
        }
        /****************/
        .comment .avatar {
            display: block;
            width: 35px;
            height: 35px;
            float: left;
            margin: .2em 0 0;
        }
        a{
            text-decoration:none;
        }
        .from{
            margin-top: 20px;
            width: 80%;
            margin-left: 10%;
            opacity: 0.7;
            border-radius: 30px;
        }
        input{
            height: 50px;
        }
        textarea{
            height: 100px;
            border-radius: 20px;
        }
        .btn{
            border-radius: 18px;
        }
    </style>
    <script>
        /**
         * Created by gao on 2016/7/25.
         */
        window.onload=function(){
            var icon1 = document.getElementById("icon1");
            var icon2 = document.getElementById("icon2");
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var xuanzhuan = document.getElementById("xuanzhuan");
            var audio = document.getElementsByTagName("audio")[0];
            //当音乐播放完停止时，自动停止图片旋转
            audio.addEventListener("ended",function(event){
                //xuanzhuan.setAttribute("id","");
                xuanzhuan.style.animationPlayState = "paused";
            },false);
            //点击暂停播放时，音乐暂停，图片停止旋转
            icon1.onclick=function(){
                audio.pause();
                pic1.style.display="none";
                pic2.style.display = "block";
                //xuanzhuan.setAttribute("id","");
                xuanzhuan.style.animationPlayState = "paused";
            };
            //点击播放音乐时，音乐开始播放，图片开始旋转
            icon2.onclick=function(){
                audio.play();
                pic1.style.display="block";
                pic2.style.display = "none";
                //xuanzhuan.setAttribute("id","xuanzhuan");
                xuanzhuan.style.animationPlayState = "running";
            }
        };
    </script>
</head>

<body>
<div th:replace="../templates/nav :: nav"></div>
<div class="box">
    <div class="title">
        <p style="font-size: 20px;color: #0acffe"><span th:text="${music.getMusic_author()}">歌手</span><span>----</span><span th:text="${music.getMusic_name()}">歌名</span></p>
    </div>
    <img class="play" id="xuanzhuan" th:src="${music.getMusic_phoyourl()}" alt="旋转特效">
    <div class="big"></div>
    <div class="middle"></div>
    <div class="small">
        <div id="pic1">
            <img id="icon1" src="/img/background_2.jpg" alt="play">
        </div>
        <div id="pic2">
            <img id="icon2" src="/img/background_1.jpg" alt="play">
        </div>
    </div>
    <audio autoplay="true"  loop="loop">
        <source th:src="${music.getMusic_url()}" type="audio/mpeg">
    </audio>
</div>
<div>
    <div class="musicInfo">
        <p style="">
            <span style="font-size: 20px;color: #0acffe;">歌曲名称：<span style="text-align: center" th:text="${music.getMusic_name()}"></span></span>
            <span style="font-size: 20px;color: #0acffe;">歌手：<span style="text-align: center" th:text="${music.getMusic_author()}"></span></span>
            <span style="font-size: 20px;color: #0acffe;">发布日期：<span style="text-align: center" th:text="${music.getMusic_creatdate()}"></span></span>
        </p>
    </div>
    <!--<span style="margin-left: 43%;margin-top: 10px;"><a style="width: 200px;" th:onclick="musicDownload([[${music.music_id}]])" class="btn btn-default glyphicon glyphicon-download" role="button">下载</a></span>-->
</div>
<div class="container-lg mt-5" style="bottom:20px;margin-top: 10px;z-index: -10">
    <div class="card border p-2">
        <div class="card-header text-info  border-bottom border-info" style="background-color: white;">
            <h5 class="bi bi-pencil-square">评论区</h5>
            <p>
                请大家文明发言
            </p>
        </div>
        <div class="card-body animated fadeInDown">
            <!--评论列表-->
            <div class="container-fluid mt-5 border p-2" style="border-top: #17a2b8 solid 2px !important;">
                <div class="p-1 comments">
                    <div class="container comment" th:each="comment:${commentlist}" th:if="${comment.getComment_musicid() != null}">
                        <a class="me-a avatar p-0 m-0">
                            <img class="w-100 h-100 rounded-circle" th:src="${comment.getUser_headUrl()}" alt="">
                        </a>
                        <div class=" ml-3 border-left ">
                            <div class="container ml-2">
                                <a class="author">
                                    <span th:text="${comment.getUser_name()}">王也</span>
                                    <span class="summary-text" th:text="${comment.getComment_date()}">2020-04-10 16:01:27</span>
                                </a>
                            </div>
                            <div class="messageText ml-2 container m-2" th:text="${comment.getComment_content()}">诸葛青，你败过吗？</div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
            <div style="margin-top: 10px;width: 94%;margin-left: 3%">
                <p>发表评论</p>
                <textarea  class="form-control" id="commentContent" rows="3"></textarea>
                <button th:onclick="btn([[${music.music_id}]],0)" style="margin-left: 95%;margin-top: 5px" type="button" class="btn btn-info btn-sm" data-toggle="modal">
                    发表
                </button>
            </div>

        </div>
    </div>
</div>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/VarGloba.js"></script>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script language='javascript' th:inline="javascript">
    var musisList = [[${music}]];
    var musicData = [];
    for (var i=0;i<musisList.length;i++){
        musicData.push({
            id:i,
            admin:musisList[i]["music_author"],
            musicname:musisList[i]["music_name"] ,
            musrc:musisList[i]["music_url"]
    })
    }
    var musicdata =[{
        id:1,
        admin:'陈奕迅',
        musicname:'十年' ,
        musrc:'/MusicFile/super/海伦 - 桥边姑娘.mp3'
    },
        {
            id:2,
            admin:'周杰伦',
            musicname:'晴天' ,
            musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/a4f15326-a023-4e59-b92b-c0d91fea29cd.mp3'
        },
        {
            id:3,
            admin:'周杰伦',
            musicname:'告白气球' ,
            musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/b678f1e2-349d-4aed-9a2d-fceea624ee07.mp3'
        },
        {
            id:4,
            admin:'辣椒',
            musicname:'起风了' ,
            musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/dd950d40-ef3c-4302-b045-db122c088c4e.mp3'
        },
        {
            id:5,
            admin:'夏雨菲',
            musicname:'纸短情长' ,
            musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/d1912f22-08ff-47fa-a953-40d2c048e719.mp3'
        },

    ]

    new Vue({
        el:'#a2',
        data:{
            musicData,
            currentidnex:0,
            url:''
        },
        computed:{
            getcurrentmusic(){
                return musicData[this.currentidnex].musrc;
            }
        },
        methods:{
            huan(index){
                this.currentidnex=index;
            },
            next(){
                this.currentidnex++;
                if(this.currentidnex==this.musicData.length){
                    this.currentidnex=0;
                }
                console.log(this.currentidnex);
            },
            last(){
                this.currentidnex--;
                if(this.currentidnex<0){
                    this.currentidnex=this.musicData.length-1;
                }
                console.log(this.currentidnex);
            },
        },
    })
</script>
<script>
    function musicDownload(music_id) {
        var url = BaseURL+"music/musicDownload?music_id="+music_id;
        var a = document.createElement("a");
        a.href = url;
        a.click();
    }
</script>
</body>
</html>

